<template>
	<view :class="'equipment ' + (pageActive === 0 ?'bgimgOne' :'bgimgTwo')">
		<view class="top">
			<uni-segmented-control :current="pageActive" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#fff"></uni-segmented-control>
		</view>


		<van-icon name="arrow-left" class="arrowLeft" color="#ffffff" size="20px" @click="trusteeship" />

		<view class="price_Taiwan">
			<view class="glass_box">
				<!-- 运行类型 -->
				<view class="bos">
					<uni-segmented-control :current="ContActive" :values="list" @clickItem="onContItem" styleType="text"
						activeColor="#fff"></uni-segmented-control>
					<!-- v-for="item in list" :key="item.id" -->
					<view class="maxCard" style="color: #fff;">
						<view class="ong">
							<p>2023年10月-2024年3月</p>
							<view>
								<uni-icons type="right" size="10"></uni-icons>
							</view>
						</view>
						<view class="allCard">
							<view>
								<view class="titleImg">
									<image src="/src/static/images/careCenter/shape.png" alt=""></image>
								</view>
								<view>
									<p>已产出总算力</p>
									<p>{{sumIncome}}KOI</p>
								</view>
							</view>
							<view>
								<view class="titleImg">
									<image src="/src/static/images/careCenter/shape.png" alt=""></image>
								</view>
								<view>
									<p>已转入KOI奖励池</p>
									<p>{{shareIncome}}KOI</p>
								</view>
							</view>
						</view>
					</view>
					<!-- 内容 {{ index }} -->
					<view class="nrs" style="color: #fff;">
						<template v-for="item in lists">
							<view
								:class="'box ' + (item.type  === 1||item.type === 2||item.type === 3 ? '' : 'noBorder')">
								<template v-if="item.type === 1">
									<view>
										<view style="background-color: #F7B500;"></view>
										<span style="color: #F7B500;">装机中</span>
									</view>
									<image src="@/static/images/careCenter/device.png" alt="item.id"></image>
								</template>
								<template v-if="item.type === 2">
									<view>
										<view style="background-color: #44D7B6;"></view>
										<span style="color: #44D7B6;">运行中</span>
									</view>
									<image src="@/static/images/careCenter/deviceTwo.png" alt="item.id"></image>
								</template>
								<template v-if="item.type === 3">
									<view>
										<span style="color: #FFFFFF;">已损坏</span>
									</view>
									<image src="@/static/images/careCenter/deviceDamage.png" alt="item.id">
									</image>
								</template>
								<template v-if="item.type === 1||item.type === 2||item.type === 3">
									<p>设备{{item.id}}</p>
									<p>已产{{item.lossRate }}KOI</p>
								</template>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<!-- 跳转页面tabbar不显示 -->
		<view class="btn_two">
			<van-button @click="addPopup">添加托管设备</van-button>
		</view>

		<!-- 添加设备 -->
		<uni-popup ref='popup' id="addSB" backgroundColor="#111317">
			<view class="orderTitle">
				<h4>添加设备</h4>
				<image @click='popupHied' src='@/static/images/Home/no.png' class="no"></image>
				<!-- <uni-icon type="closeempty" size='44' class="cross" @click='popupHied' /> -->
			</view>
			<!-- 设备芯片码 -->
			<view class="equipmentOrder">
				<view class="leftContent">
					<view class="Remaining">
						<text>设备芯片码</text>
						<text class="greenColor">已输入{{1}}个</text>
					</view>
					<view class="steep">
						<textarea v-model="message"></textarea>
						<!-- 	<view class="textareaBox">
							<view v-for="(item,index) in " :key="index">{{item}}</view>
						</view> -->
					</view>
				</view>
				<view class="rightContent">
					<!-- 放图标 -->
					<van-icon name="scan" id="scan" />
				</view>
			</view>
			<powercardNum :max='MaxVal' :value='num' @changeNum='changeNum'></powercardNum>
			<!-- 安全密码 -->
			<view class="inputTitle">
				安全密码
			</view>
			<view class="inputItem">
				<input v-model="secureValue" class="uni-input" name='password' placeholder="" maxlength='16'
					:password="showPassword" />
				<uni-icons class="passIcon" :type="!showPassword ? 'eye-filled' : 'eye'" size="24"
					@click="changePassword" color='#D8D8D8'></uni-icons>
			</view>
			<view class="tips">忘记密码？</view>
			<view style="height: 80px;">
			</view>
			<!-- 立即运行 (优化时封装)-->
			<view class="bottomBtn">
				<ProButton class="btn" @click="trusteeshipFn">
					<template v-slot:text>
						<view>立即运行</view>
					</template>
				</ProButton>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { showNotify } from 'vant';
	import { ref } from 'vue'
	import powercardNum from '@/components/equipmentC/powercardNum/index.vue'
	import ProButton from '@/components/product/ProButton/index.vue'
	import { useStore } from 'vuex'
	import { onLoad } from '@dcloudio/uni-app';
	import { getKOIIncome, getManagerList, machineHosting } from '@/api/hostingCenter'
	import { hashCardsVal } from '@/api/hashCards'
	//
	const ContActive = ref(0)
	//
	const items = ref(['全球托管中心', '自行托管'])
	// vuex
	const store = useStore()
	// 添加设备
	const popup = ref()
	// 密码icon控制
	const showPassword = ref(true)
	// 以产出
	const sumIncome = ref<Number>(0)
	// 转入koi奖池
	const shareIncome = ref<Number>(0)
	// 算力卡最大值
	const MaxVal = ref<number>(0)
	// 
	const all = ref(0)
	const running = ref(0)
	const damage = ref(0)
	const active = ref(0)
	const pageActive = ref(0)
	// 添加设备数
	let num = ref(1)
	// 密码
	let secureValue = ref<string>('') // 本地的安全密码(也就是用户输入的安全密码)
	let textColor = ref<string>('#fff') // 文字颜色的改变
	let message = ref('')
	//  内容名
	const list = ref([`全部(`, `运行中(`, `已损坏(`])
	//	内容设备列表
	const lists = ref([])
	onLoad(async () => {
		// 产出和转入奖池值
		var { data } = await getKOIIncome({
			type: 0,
			machineCode: ''
		})
		sumIncome.value = data.sumIncome
		shareIncome.value = data.shareIncome
		// 获取机器列表
		var res = await getManagerList({ type: 0 })
		list.value[0] += equipmentNum(res.rows, 1) + equipmentNum(res.rows, 2) + equipmentNum(res.rows, 3) + ')'
		list.value[1] += equipmentNum(res.rows, 2) + ')'
		list.value[2] += equipmentNum(res.rows, 3) + ')'
		// 
		lists.value = disposeList(res.rows)
	})
	async function onClickItem(e) {
		if (pageActive.value != e.currentIndex) {
			pageActive.value = e.currentIndex
		}
	}
	//
	const changePassword = () => {
		showPassword.value = !showPassword.value
	}
	// 添加设备弹出层
	const addPopup = async () => {
		var { data } = await hashCardsVal()
		// console.log(data.fund)
		MaxVal.value = data.fund
		popup.value.open('bottom')
	}
	// 关闭
	const popupHied = () => {
		popup.value.close()
	}
	// 切换设备类型
	const onContItem = async (e) => {
		if (ContActive.value != e.currentIndex) {
			ContActive.value = e.currentIndex
			console.log(ContActive.value)
			// 获取机器列表
			var res = await getManagerList({ type: ContActive.value })
			console.log(22,res.rows)
			lists.value = disposeList(res.rows)
			console.log(lists.value)
		} else {
			return
		}
	}
	// 获取指定状态的设备数量
	const equipmentNum = function (list, num) {
		return list.filter(item => item.type == num).reduce((sum) => sum += 1, 0)
	}
	// 返回数据处理
	const disposeList = function (list) {
		var num = list.length % 3
		console.log(list)
		if (num === 0) {
			return list
		}
		for (let i = 0; i < 3 - num; i++) {
			list.push({})
		}
		return list
	}
	const trusteeshipFn = async () => {
		if (secureValue.value != store.state.securityCodeValue) {
			showNotify({ type: 'danger', message: '安全密码错误，请重新输入' });
			textColor.value = 'rgba(224, 32, 32, 1)'
		} else {
			var res = await machineHosting({
				type: "3",
				count: "1",
				num: num.value,
				payPassword: secureValue.value,
				machineCode: message.value
			})
			console.log(res)
			if (res.code === 500) {
				showNotify({ type: 'danger', message: res.msg });
				textColor.value = 'rgba(224, 32, 32, 1)'
			}
		}
	}
	// 数量
	const changeNum = (val) => {
		num.value = val
		console.log(num.value)
	}
	// 回退上一页
	const trusteeship = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	::v-deep .bos {
		.segmented-control__text {
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40px;
		}
	}

	::v-deep .segmented-control__item--text {
		border-width: 0;
	}

	::v-deep .segmented-control__item {
		width: 220px;
	}

	::v-deep .segmented-control__text {
		font-size: 36px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FFFFFF !important;
		opacity: 0.7;
		line-height: 50px;
		white-space: nowrap;
		// letter-spacing: 1px;
	}

	::v-deep .segmented-control__item--text {
		color: #FFFFFF !important;
		opacity: 1;

	}

	.inputTitle {
		color: #fff;
		font-size: 20px;
		padding-left: 4.5%;
		margin: 0 0 16px 0;
		padding-top: 40px;
		font-size: 24px;
	}

	.tips {
		color: red;
		text-align: right;
		font-size: 20px;
		padding-right: 4.5%;
	}

	.inputItem {
		position: relative;
		display: flex;
		width: calc(91% - 1.3125rem);
		padding-left: 1.3125rem;
		height: 88px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 0.5rem;
		border: 0.0625rem solid rgba(255, 255, 255, 0.6);
		font-size: 0.875rem;
		margin: 14px auto;

		.uni-input {
			height: 88px;
			line-height: 88px;
			color: #fff;
		}

		.passIcon {
			position: absolute;
			right: 40px;
			top: 0;
			height: 88px;
			line-height: 88px;
		}
	}

	.bos {
		width: calc(100% - 64px);
		padding: 0 32px;
		padding-top: 32px;
	}

	.equipment {
		background: no-repeat;
		background-size: 100%;
		background-color: rgba(18, 19, 23, 1);

		&.bgimgOne {
			background-image: url('@/static/images/Trusteeship/back.png')
		}

		&.bgimgTwo {
			background-image: url('@/static/images/Trusteeship/bitmap.png')
		}
	}

	.glass_box {
		background: url(@/static/images/Trusteeship/glass.png) no-repeat;
		background-size: 100% auto;
		margin-top: 46%;
	}

	.conent {
		min-height: 100vh;
		overflow-y: auto;
	}

	::v-deep.van-tabs__line {
		background-color: transparent;
	}

	::v-deep span.van-tab__text.van-tab__text--ellipsis {
		font-size: 32px;
		height: 64px;
		line-height: 64px;
	}


	::v-deep.van-tabs__wrap {
		height: 88px;
	}

	::v-deep.van-tabs--line .van-tabs__wrap {
		height: auto;
	}

	// tabs切换样式
	::v-deep.van-tabs__nav.van-tabs__nav--line {
		border-radius: 50px;
		padding: 0;
		margin-top: 30px;
	}

	::v-deep.van-tab--active {
		border-radius: 50px;
	}

	::v-deep.van-tabs__content {
		color: #fff;
	}

	.content {
		min-height: 100vh;
	}

	// ::v-deep #addSB {
	// 	border-radius: 40px;
	// }

	::v-deep .van-tabs__nav--complete {
		background-color: transparent !important;
	}

	::v-deep .van-notify {
		height: 124px;
		font-size: 28px;
		color: #fff;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}

	::v-deep #scan {
		border-left: 1px solid gray;
		padding: 0 0 0 32px;
		margin-top: 24px;
	}


	.equipment {
		position: relative;
		min-height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.orderTitle {
			position: relative;
			width: 91%;
			height: 97px;
			color: #fff;
			text-align: center;
			line-height: 97px;
			// padding: 24px 0;
			font-size: 32px;
			margin: 0 auto;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);

			&>h4 {
				font-weight: normal;
			}

			image {
				position: absolute;
				width: 72px;
				height: 72px;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}

			.arrowLeft {
				position: absolute;
				top: 50%;
				left: 5%;
				transform: translateY(-50%);
			}
		}

		.equipmentOrder {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 91%;
			margin: 40px auto 0 auto;
			color: #fff;
			font-size: 24px;

			.leftContent {
				width: 85%;

				.Remaining {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 0 0 16px 0;

					.greenColor {
						color: rgba(0, 208, 185, 1);
					}
				}

				.steep {
					width: 100%;
					height: auto;
					background-color: rgba(255, 255, 255, 0.10);
					border-radius: 16px;
					border: 2px solid rgba(255, 255, 255, 0.6);

					textarea {
						width: 100%;
					}

					.textareaBox {
						width: 321px;
						margin: 0 auto;
						text-align: center;

						&>view {
							margin: 10px 0;
							font-size: 28px;
						}
					}
				}
			}

			.rightContent {
				width: 10%;
				margin-top: 50px;
				text-align: right;
				font-size: 32px;
			}
		}

		.arrowLeft {
			position: absolute;
			top: 1.5%;
			left: 2%;
		}

		.top {
			display: flex;
			width: 100%;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 47px;

			.title {
				width: 100%;
				text-align: center;
				height: 56px;
				font-size: 40px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #21F5EA;
				line-height: 56px;
				letter-spacing: 1px;
			}
		}

		.powercard {
			position: absolute;
			top: 22px;
			right: 40px;
			color: #21F5EA;
			font-size: 28px;
		}

		.btn_two {
			position: absolute;
			bottom: 30px;
			left: 0;
			width: 100vw;
			padding: 0 32px;
			box-sizing: border-box;
			height: 88px;
			display: flex;
			justify-content: center;

			&>:nth-child(1) {
				width: 47%;
				height: 88px;
				background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));
				border: none;
				border-radius: 16px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: rgba(0, 0, 0, 1);
			}
		}

		.bottomBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 112px;
			background: rgba(18, 19, 23, 1);
			border-top: 1px solid gray;


			.btn {
				width: 280px;
				height: 80px;
				font-size: 28px;
				color: rgba(18, 19, 23, 1);
				font-weight: bold;
				border-radius: 16px;
				background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));
			}
		}
	}

	.price_Taiwan {
		width: 100vw;

		.each {
			text-align: center;
			font-size: 200px;
			color: rgba(247, 181, 0, 1);
		}

		.image {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.maxCard {
		// margin-left: 24px;
	}

	.allCard {
		font-size: 24px;
		display: flex;
		margin: 24px 0;

		.titleImg {
			width: 72px;
			height: 72px;
			border: 1px solid white;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40px;
				height: 40px;
			}
		}

		&>view {
			display: flex;
			align-items: center;
			margin-right: 40px;

			view {
				margin-right: 16px;
			}
		}
	}

	.ong {
		display: flex;
		align-items: center;
		font-size: 24px;
		font-weight: 400;
		color: #44D7B6;
		font-family: PingFangSC, PingFang SC;
		margin-top: 40px;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 22px;
			height: 22px;
			background: #44D7B6;
			border-radius: 50%;
			font-size: 20px;
			color: black;
		}
	}

	.nrs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.box {
			border-radius: 16px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			width: 194px;
			height: 298px;
			padding: 8px;

			&.noBorder {
				border-color: rgba(0, 0, 0, 0);
			}

			&>image {
				width: 110px;
				height: 120px;
				display: block;
				margin: 20px auto 38px;
			}

			&>p {
				text-align: center;
			}

			&>view {
				display: flex;
				align-items: center;
				color: #F7B500;
				font-size: 20px;

				view {
					width: 8px;
					height: 8px;
					border-radius: 50%;
					margin-right: 4px;
				}
			}
		}
	}

	.card {
		padding: 40px 30px;
	}

	::v-deep.van-tab--shrink {
		font-size: 30px;
		margin-right: 20px;
	}

	.nr {
		width: 420px;
		position: relative;
		top: 300px;
		z-index: 4;

	}

	.conent {
		min-height: 100vh;
		overflow-y: auto;
	}

	::v-deep.van-tabs__line {
		background-color: transparent;
	}

	::v-deep.van-tabs__nav.van-tabs__nav--line {
		width: 100px;
		font-size: 20px;
		margin: 0 auto;
		height: 64px;
	}

	::v-deep.van-tabs--line .van-tabs__wrap {
		height: auto;
	}

	// tabs切换样式
	::v-deep.van-tabs__nav.van-tabs__nav--line {
		// border: 1px solid #707173;
		// border-radius: 50px;
		padding: 0;
		// margin-top: 30px;
		width: 100%;
	}
</style>